﻿@{
    ViewBag.Title = "Calendar";
}
<script src="@Url.Content("~/Scripts/ext4/uxMedia/uxmedia.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ext4/uxMedia/uxvismode.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ext4/uxMedia/uxflash.js")" type="text/javascript"></script>
<script type="text/javascript">
    Ext.onReady(function () {
        var loginForm = Ext.create('Ext.form.Panel', {
            title: 'Contact Info',
            width: 300,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'textfield',
                id: 'name',
                name: 'name',
                fieldLabel: 'Name',
                allowBlank: false  // requires a non-empty value
            }, {
                xtype: 'textfield',
                name: 'password',
                fieldLabel: 'Password',
                inputType: 'password'
            }],
            buttons: [{
                text: '登陆',
                handler: login
            }, {
                text: '重置',
                handler: reset
            }]

        });
        function login() {//提交表单   
            if (loginForm.getForm().isValid()) {
                loginForm.getForm().submit({
                    waitMsg: "正在向服务器提交数据",
                    clientValidation: true, //进行客户端验证   
                    url: '/Home/Test2', //请求的url地址   
                    method: 'GET', //请求方式
                    params: {
                        name: loginForm.getForm().findField('name'),
                        password: loginForm.getForm().findField('password')
                    },
                    success: function (form, action) { //加载成功的处理函数 
                        Ext.Msg.alert('提示', '系统登陆成功' + action.result.name);
                    },
                    failure: function (form, action) { //加载失败的处理函数   
                        Ext.Msg.alert('提示', '系统登陆失败，原因：' + action.failureType);
                    }
                });
            }
        }
        function reset() {//重置表单   
            loginForm.form.reset();
        }

        Ext.create('Ext.Button', {
            text: 'Click me',
            renderTo: Ext.getBody(),
            handler: function () {
                Ext.Ajax.request({
                    url: '/Home/Test',
                    params: {
                        name: loginForm.getForm().findField('name').getValue(),
                        password: loginForm.getForm().findField('password').getValue()
                    },
                    success: function (response) {
                        var response = Ext.JSON.decode(response.responseText);
                        Ext.Msg.alert("message", response.UserName);
                    },
                    failure: function (response, opts) {
                        Ext.Msg.alert(response.status);
                    }
                });
            }
        });
    });
    Ext.require(['Ext.grid.*', 'Ext.data.*']);
    Ext.onReady(function () {
        Ext.define('MyData', {
            extend: 'Ext.data.Model',
            fields: [
            //第一个字段需要指定mapping，其他字段，可以省略掉。   
                {name: 'UserName', mapping: 'UserName' },
                'Sex',
                'Age',
                'XueHao',
                'BanJi'
            ]
        });
        //创建数据源   
        var store = Ext.create('Ext.data.Store', {
            model: 'MyData',
            proxy: {
                //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可   
                type: 'ajax',
                url: '/Home/GetInfo',
                extraParams: { name: 'ffff' },
                reader: {
                    type: 'json',
                    root: 'items'
                }
            },
            autoLoad: true
        });

        //创建Grid   
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            columns: [
                { text: "姓名", width: 120, dataIndex: 'UserName', sortable: true },
                { text: "性别", flex: 1, dataIndex: 'Sex', sortable: false },
                { text: "年龄", width: 100, dataIndex: 'Age', sortable: true },
                { text: "学号", width: 100, dataIndex: 'XueHao', sortable: true },
                { text: "班级", width: 100, dataIndex: 'BanJi', sortable: true }
            ],
            height: 400,
            width: 480,
            x: 120,
            y: 140,
            title: 'ExtJS4 Grid示例',
            renderTo: 'demo',
            viewConfig: {
                stripeRows: true
            }
        });

        var win = new Ext.Window({
            title: 'TEST',
            layout: 'fit',
            items: [new Ext.ux.FlashPanel({
                border: false,
                style: 'height:100%;',
                bodyStyle: 'height:100%;',
                mediaCfg: {
                    mediaType: 'FLV',
                    url: 'video.flv',
                    width: '400px',
                    height: '300px',
                    start: true,
                    loop: true,
                    controls: true
                }
            })]
        });
        win.show();

    });
</script>
@* ReSharper restore WrongExpressionStatement *@
<div id="demo">
</div>
